<template>
  <div class="hp100 ofya">
    <DataOverview class="h220" />
    <div class="echarts_parent flb mt15 h330 wp100">
      <div class="echarts hp100 wp50">
        <div class="flex_space_between echarts_header h32">
          <span>历史入库品牌Top10</span>
        </div>
        <earlyWarning v-show="historyBrandData.length > 0" ref="earlyWarningRef" :history-brand-data="historyBrandData" class="hc32 wp100" />
        <PageEmptyData v-if="historyBrandData.length == 0" :text="'暂无数据'" />
      </div>
      <div class="echarts hp100 wp50">
        <div class="flex_space_between echarts_header h32">
          <span>历史产品出库TOP10</span>
        </div>
        <historicalOut v-show="historyOutData.length > 0" ref="historicalOutRef" :history-out-data="historyOutData" class="hc32 wp100" />
        <PageEmptyData v-if="historyOutData.length == 0" :text="'暂无数据'" />
      </div>
    </div>
    <div class="bWH mt15  wp100 p16 br20">
      <!-- ====== 表格上方的筛选条件 start ======-->
      <div class="table_filter flex_space_between h32">
        <div class="flex_start ">
          <div class="table_filter_search">
            <el-input v-model="params.commonSearch" class="pub_input pub_input_search" placeholder="搜索货号、产品名称、品牌、供应商" clearable @keydown.enter.native="handleSearch" @clear="handleSearch">
              <img slot="prefix" src="@/assets/img/orderManagement/search.png" class="pub_imgSize16" />
            </el-input>
          </div>
          <div class="table_filter_select ml8">
            <el-select v-model="params.isZero" placeholder="请选择" class="pub_select" @change="handleSearch">
              <el-option v-for="item in radioList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </div>
          <div class="table_filter_select ml8">
            <el-button type="text" class="public_confirm_btn pub_button" @click="handleSearch"> 搜索 </el-button>
          </div>
        </div>
        <div class="flex_start flex_end">
          <div>
            <el-button type="text" class="w108 pub_button pub_buttonGreen" @click="addStock">
              <img src="@/assets/img/orderManagement/add.png" alt="添加库存" />
              <span class="ml5">添加库存</span>
            </el-button>
          </div>
          <div class="ml12">
            <el-button type="text" class="w128 pub_button" @click="exportStockBtnClick">
              <img src="@/assets/img/orderManagement/export.png" alt="导出库存" />
              <span class="ml5">导出库存</span>
            </el-button>
          </div>
        </div>
      </div>
      <!-- ====== 表格上方的筛选条件 end ======-->
      <el-table ref="multipleTable" size="mini" :data="tableData" border tooltip-effect="dark" class="wp100 mt12" :height="`${536 * $f}px`">
        <el-table-column label="库存编码" align="center" show-overflow-tooltip prop="productBatchNo" :width="`${100 * $f}`" />
        <el-table-column label="产品名称" align="center" show-overflow-tooltip prop="productBrandArticleNoName" :min-width="`${320 * $f}`" />
        <el-table-column label="公司名称" align="center" show-overflow-tooltip prop="companyName" :min-width="`${260 * $f}`" />
        <el-table-column label="供应商" align="center" show-overflow-tooltip prop="productSupplierName" :min-width="`${200 * $f}`" />
        <el-table-column label="品牌" align="center" show-overflow-tooltip prop="productBrandName" :min-width="`${100 * $f}`" />
        <el-table-column label="货号" align="center" show-overflow-tooltip prop="productBrandArticleNo" :min-width="`${140 * $f}`" />
        <el-table-column label="单价" align="center" show-overflow-tooltip prop="singlePrice" :min-width="`${100 * $f}`" />
        <el-table-column label="数量" align="center" show-overflow-tooltip :min-width="`${100 * $f}`">
          <template slot-scope="{ row }">
            {{ Number(row.qty || 0).toFixed(0) }}
          </template>
        </el-table-column>
        <el-table-column label="规格" align="center" show-overflow-tooltip prop="productSpecificationName" :min-width="`${200 * $f}`" />
        <el-table-column label="计量单位" align="center" show-overflow-tooltip prop="unit" :min-width="`${100 * $f}`" />
        <el-table-column v-if="roleType != 3" label="操作" :min-width="`${150 * $f}`" align="center" fixed="right">
          <template slot-scope="{ row }">
            <el-button type="text" class="pub_button public_1EB398_btn" size="mini" @click="editBtnClick(row)">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column label="税收编码" align="center" show-overflow-tooltip prop="taxCode" :min-width="`${255 * $f}`" />
        <template slot="empty">
          <PageEmptyData />
        </template>
      </el-table>
      <div class="pub_pageination flex_center mt10 h32">
        <el-pagination background :page-size="params.pageSize" :current-page.sync="params.pageNum" layout="total,prev, pager, next,sizes" :total="params.total" @current-change="changePage" @size-change="changeSize"> </el-pagination>
      </div>
    </div>
    <!-- 导入弹窗 -->
    <PageDialog :title="'导入'" :dialog-visible="importDialogVisible" :width="`${$f * 600}px`" @close="closeDialog">
      <el-upload ref="upload" class="pub_upload" drag :data="{ file: fileList }" :action="uploadFileUrl" :on-success="uploadFileSucess" :auto-upload="false" :limit="1" :headers="headers" :file-list="fileList" :on-remove="handleRemoveFile" :on-change="changeUploadFile">
        <img src="@/assets/img/orderManagement/import.png" alt="导入" class="pub_imgSize30 mt36 mb16" />
        <div class="pub_importFile_tip">将文件拖到此处，或<em class="ml5">点击上传</em></div>
        <div class="pub_importFile_tip mt10">仅支持Word、Excel</div>
      </el-upload>
    </PageDialog>
    <!-- 导出提示 -->
    <PageDialog :title="'导入'" :dialog-visible="exporttDialogVisible" :width="`${$f * 600}px`" @close="closeDialog">
      <div class="pub_tips">
        将导出Excel表格，请确认是否导出？
      </div>
    </PageDialog>
    <!-- 编辑库存 -->
    <PageDialog :title="'编辑库存'" :dialog-visible="addDialogVisible" :width="`${500 * $f}px`" @close="closeDialog" @submit="confirmAdd">
      <el-form ref="ruleForm" :model="addParams" label-width="5rem" class="addOrder">
        <el-form-item label="库存数量">
          <el-input v-model="addParams.qty" placeholder="请输入库存数量" class="pub_input" :maxlength="5"></el-input>
        </el-form-item>
        <el-form-item label="商品单价">
          <el-input v-model="addParams.singlePrice" placeholder="请输入商品单价" class="pub_input pub_input_moneySymbol" :maxlength="8">
            <span slot="prefix" class="pub_input_money">¥</span>
          </el-input>
        </el-form-item>
        <el-form-item label="计量单位">
          <el-select v-model="addParams.unit" placeholder="请选择" class="pub_select">
            <el-option v-for="item in unitColumns" :key="item.unit" :label="item.unit" :value="item.unit"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </PageDialog>
  </div>
</template>
<script>
import DataOverview from './components/DataOverview.vue';
import earlyWarning from './components/EarlyWarning.vue';
import historicalOut from './components/HistoricalOut.vue';
import tableFun from '@/mixin/tableFun.js';
import stockList from '@/mixin/stockList.js';
import exportFun from '@/mixin/exportFun.js';
export default {
  components: { historicalOut, DataOverview, earlyWarning },
  mixins: [tableFun, stockList, exportFun],
  data() {
    return {
      historyBrandData: [], //历史入库品牌Top10
      historyOutData: [], //库存统计历史出库Top10
      radioList: [
        { value: '2', label: '有库存' },
        { value: '1', label: '无库存' }
      ],
      unitColumns: [], //计量单位
      addParams: {
        qty: '',
        unit: '',
        singlePrice: ''
      },
      addDialogVisible: false, //添加库存弹窗
      // ====== 上传文件的参数 start ======
      importDialogVisible: false, //导入弹窗
      exporttDialogVisible: false, //导出弹窗
      fileList: [], //导入的文件
      uploadFileUrl: '' //上传文件接口路径
      // ====== 上传文件的参数 end ======
    };
  },
  computed: {
    headers() {
      return {
        token: window.localStorage.getItem('token')
      };
    },
    roleType() {
      //1:超级管理员 2:普通管理员 3:普通员工
      return this.$store.state?.userInfo?.roleType;
    }
  },
  created() {
    this.getDataList();
    this.getUnitAll();
    this.getStatisticsHistoryBrand();
    this.getStatisticsHistoryOut();
  },
  methods: {
    //库存统计历史入库品牌Top10
    async getStatisticsHistoryBrand() {
      let res = await this.$api.post(this.$url.statisticsHistoryBrand);
      if (res.code == 200) {
        this.historyBrandData = res.data;
      }
    },
    //库存统计历史出库Top10
    async getStatisticsHistoryOut() {
      let res = await this.$api.post(this.$url.statisticsHistoryOut);
      if (res.code == 200) {
        this.historyOutData = res.data;
      }
    },
    //编辑库存
    async confirmAdd() {
      const { qty, unit, singlePrice } = this.addParams;
      if (!qty) {
        return this.$message.warning('请输入库存数量');
      }
      if (!singlePrice) {
        return this.$message.warning('请输入单价');
      }
      if (!unit) {
        return this.$message.warning('请选择计量单位');
      }
      let res = await this.$api.post(this.$url.inventoryUpdate, this.addParams);
      if (res.code === 200) {
        this.$message.success('更新成功');
        this.closeDialog();
      }
    },
    //获取计量单位
    async getUnitAll() {
      let { data } = await this.$api.get(this.$url.unitAll);
      this.unitColumns = data;
    },
    //关闭弹窗
    closeDialog() {
      this.exporttDialogVisible = false;
      this.addDialogVisible = false;
      this.importDialogVisible = false;
      this.addParams = Object.assign({}, this.$options.data().addParams); //重置参数
    },
    async addStock() {
      let req = await this.$api.get(this.$url.queryUserInfo);
      if (req.code == 200) {
        this.$store.commit('setUserInfo', req.data);
        if (req.data.subscribeStatus === '1') {
          this.goPage('layout/chooseProduct', 4);
        } else {
          this.$bus.$emit('openVipDialog');
        }
      }
    },
    //页面跳转
    goPage(pageUrl, sourceType, row) {
      this.$router.push({
        path: '/' + pageUrl,
        query: {
          sourceType,
          activeIndex: '3'
        }
      });
      if (sourceType != 4) {
        window.sessionStorage.setItem('stockInfo', JSON.stringify(row));
      }
    },
    // ====== 上传文件的方法 start ======
    //上传文件成功
    uploadFileSucess() {},
    //删除文件时出发此方法
    handleRemoveFile(file, fileList) {
      this.fileList = fileList;
    },
    //文件状态改变触发此方法
    changeUploadFile(file, fileList) {
      this.fileList = fileList;
    },
    //确认上传文件
    confirmUpload() {
      if (this.fileList.length == 0) {
        this.$message.warning('请上传文件');
      } else {
        this.$refs.upload.submit(); //上传文件
      }
    }
    // ====== 上传文件的方法 edn ======
  }
};
</script>
<style lang="less" scoped>
.data_area {
  padding: 20px;
  background: #ffffff;
  border-radius: 16px 16px 16px 16px;
}
.echarts_parent {
  width: 100%;
  overflow: hidden;
  .table_content,
  .echarts {
    background: #ffffff;
    border-radius: 16px 16px 16px 16px;
    padding: 20px;
    box-sizing: border-box;
  }
  .echarts {
    border: 1px solid #e0e2e7;
    float: left;
    & + .echarts {
      margin-left: 16px;
    }
    .echarts_header {
      font-size: 16px;
      color: #0a0b0d;
    }
  }
  .table_content {
    width: 100%;
  }
  .table_filter_search {
    width: 300px;
  }
  .table_filter_select {
    width: 150px;
  }
  .high_filter_btn {
    width: 108px;
  }
}
.addOrder {
  .el-form-item {
    width: 100%;
  }
}
</style>
